<template>
	<tui-list-cell >
		<view class="tui-line-cell">
			<view class="tui-title">
				<text v-show="rules_&&rules_[0]&&rules_[0].required" class="isrequire">*</text>
				<text>{{label}}</text>
			</view>
			<view class="tui-box">
				<slider value="50" @change="sliderChange" show-value />
			</view>
		</view>
	</tui-list-cell>
</template>

<script>
	export default {
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			options: {
				type: Object,
				default: () => {
					return {}
				}
			},
			rules: {
				type: Array,
				default: () => {
					return []
				}
			},
			model: {
				type: String,
			},
			keyStr: {
				type: String,
			}
		},
		data() {
			return {
				slider:'',
				options_:{},
				rules_:[],
				model_:'',
				key_:''
			}
		},
		created() {
		  // 为数据渲染
		  if(this.emData && this.emData.options){
		    this.showType_ = this.emData.options.showType;
		    this.readonly_ = this.emData.options.readonly;
		    this.options_ = this.emData.options;
		    this.rules_ = this.emData.rules;
		  }else{// 一般组件使用
		    this.showType_ = this.showType;
		    this.options_ = this.options;
		    this.rules_ = this.rules;
		    this.model_ = this.model;
		    this.key_ = this.keyStr;
		  }
		  this.slider = this.emData.slider;
		  this.array = this.options_.options;
		  this.value = this.options_.defaultValue;
		},
		watch:{
		  'emData.options.defaultValue':function(val){
		    this.slider = val.value;
		  }
		},
		methods: {
			sliderChange:function(e) {
				console.log('value 发生变化：' + e.detail.value)
				this.slider = e.detail.value
				
				this.$emit('onChangeVal',{value:this.slider});
			}
		},
		modal:{
		  prop: 'value',
		  event: 'onChangeVal'
		}
	}
</script>

<style lang="scss">
	.isrequire{
		color: red;
	}
	.tui-line-cell {
		width: 100%;
		height: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.tui-title {
		min-width: 100upx;
		line-height: 32rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}

	.tui-box {
		flex: 1;
	}
	
</style>
